<script setup lang="ts">
import { ref } from 'vue';
import { ElDialog } from 'element-plus';

const visible = ref(false);

defineExpose({
  visible
});

</script>

<template>
  <ElDialog v-model="visible" title="敬告">
    <div class="usage-instructions">
      <h3>使用说明</h3>
      <ul>
        <li>点击页面右下角的“启动”按钮，可以查看当前课程的详细信息。</li>
        <li>课程ID用于唯一标识当前课程。</li>
        <li>课程总数和页数信息仅供参考，实际数据以系统为准。</li>
      </ul>
      <h3>注意事项</h3>
      <ul>
        <li>请勿随意修改课程ID，否则可能导致数据错误。</li>
        <li>如需帮助，请联系管理员。</li>
      </ul>
    </div>
  </ElDialog>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
